<template>
  <div>
      <div class="wrapper">
        
       
        <div class="box1"><t-content><t-space direction="horizontal"  class="a">
         
        <t-image 
          shape="circle"
          src="/unhappy.png"
          :style="{ width: '120px', height: '120px' }"
        /> 
        <t-image 
          shape="circle"
          src="/neutral.png"
          :style="{ width: '120px', height: '120px' }"/>
        <t-image
          shape="circle"
          src="/smile.png"
          :style="{ width: '130px', height: '120px' }"
        />
      </t-space>
      <div direction="vertical"><t-space></t-space></div>
      <div>
      <div>
        <t-space :size="15" class="a">
        <t-button  theme="success" shape="round" variant="base" size="large" @mouseover="yr" @mouseleave="yc" :style="active" >Useful</t-button>
        <t-button theme="success" shape="round" variant="base" size="large" @mouseover="yr" @mouseleave="yc" :style="active">Effective</t-button>
        <t-button theme="success" shape="round" variant="base" size="large" @mouseover="yr" @mouseleave="yc" :style="active">Well-served</t-button>
      </t-space>
       </div>
       <div direction="vertical"><t-space></t-space></div>
       <div >
        <t-space :size="50" class="b">
          <t-button theme="success" shape="round" variant="base" size="large">beautiful</t-button>
          <t-button theme="success" shape="round" variant="base" size="large" >easy-operating</t-button>
        </t-space>
       </div>
      </div>
       <div direction="vertical"><t-space></t-space></div>

<t-space >
  <t-textarea 
    autofocus="true"
      class="juzhong"
      v-model="value3"
      placeholder="Please Leave Your Comments and Advice!"
      name="description"
      :autosize="{ minRows: 10, maxRows: 15 }"
    /></t-space>

    <div direction="vertical"><t-space></t-space></div>
<t-button theme="primary" shape="round" variant="base" size="large" class="button"  >Summit</t-button>
      </t-content> </div>
      <t-space class="c">   
        <div class="box2">
          <t-space direction="vertical" class="d">
            <h2>If You need Help Please Contact Us</h2>
            <t-space direction="horizontal">
    <t-icon  name="mail" size="large"/><t-input type="password" default-value="Group9@qq.com" autofocus="true" showClearIconOnEmpty>
    </t-input></t-space>

    <t-space direction="horizontal">
      <t-icon  name="call" size="large"/><t-input type="password" default-value="(+86)xxxxxxxxx" autofocus="true" showClearIconOnEmpty/>
    </t-space>
    
    <t-space direction="vertical" class="e">
    <t-input size="large" placeholder="Adress:" class="input" autofocus="true"/>
    <t-image src="/切图.png"
          :style="{ width: '557px', height: '362px' }"></t-image>
        
  </t-space>
  </t-space>

        </div>
      </t-space>
      </div>
    
        <t-footer class ="t-footer"></t-footer>


  </div>
</template>
<script>
export default {
  e1:"#demo",
  data() {
    return {
      active:''
    }
  },
  methods:{
    yr(){
      this.active="color:orange"
      this.active="background-color:#808000"
    },
    yc(){
      this.active =''
    }
  }
}
const cover="";
</script>
<style>
.about{
  height: 450px;
  width: 250px;
  background-color: rgb(245, 255, 250);
}
.left-icon{
  margin-left:auto
}
.logout-bottom
{
  margin-top: 200px;
}
.t-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.blank
{
  width: 1190px;
  height: 600px;
}
.t-layout
{
  background-color: rgb(245, 255, 250);
}
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  
}
.a{ /*a,b,c,d,e皆为对齐方式*/ 
  margin-left:20px
}
.b{
  margin-left:50px
}
.c{
   margin-left: 40px
}
.d{
  margin-left: 100px
}
.e{
  margin-left:-90px
}
.box1 {
margin-top: 48px;
width: 440px;
height: 600px;
opacity: 1;
border-radius: 34px;
background: rgba(237, 241, 252, 0.58);
margin-left:100px 
  
}

.box2 {
  grid-row: 1/3;
  grid-column: 3;
  margin-top: 48px;
width: 580px;
height: 600px;
opacity: 1;
border-radius: 34px;
background: rgba(237, 241, 252, 0.58);
  margin-right:200px;
}
.juzhong{
  margin-left:80px;
  width: 400rpx;
}
.button{
  margin-left:110px;
  width:200px
}
.input{
   border-radius: 50rpx;
   background-color:crimson;
}
/* div{ border:3px solid rgb(239, 188, 188)} */
</style>


